<template>
  <div style="font-family: Microsoft YaHei;">
    <!-- 拖欠农民工工资问题排查 -->
    <div class="specialManager">
      <div style="width:1200px;margin:0 auto">
        <div class="title" style="margin-bottom:20px">拖欠农民工工资问题排查</div>
        <!-- 选年，季度 -->
        <div class="flexEnd" style="margin-bottom:20px">
          <div>
            <a-select
              label-in-value
              :default-value="{ key: '2021' }"
              style="width: 120px;margin-right:10px"
              @change="selectChange1"
            >
              <a-select-option value="2021">2021</a-select-option>
              <a-select-option value="2020">2020</a-select-option>
              <a-select-option value="2019">2019</a-select-option>
            </a-select>
            <a-select
              label-in-value
              :default-value="{ key: '第二季度' }"
              style="width: 120px"
              @change="selectChange2"
            >
              <a-select-option value="第一季度">第一季度</a-select-option>
              <a-select-option value="第二季度">第二季度</a-select-option>
              <a-select-option value="第三季度">第三季度</a-select-option>
              <a-select-option value="第四季度">第四季度</a-select-option>
            </a-select>
          </div>
        </div>
        <!-- 图表表格 -->
        <div class="content flexBetween">
          <div class="contentLeft">
            <div style="text-align:center;width:400px;margin-bottom:20px;font-weight:bold;color:#333">拖欠农民工工资问题排查表上报情况</div>
            <div style="width:400px;height:400px">
              <Echart :echartObj="echartObj" />
            </div>
          </div>
          <div class="contentRight">
            <div style="text-align:center;margin-bottom:20px;font-weight:bold;color:#333">拖欠农民工工资问题排查情况</div>
            <div class="contentRight-content">
              <div class="contentRight-title"> <img src="@/assets/homeImg/message.png" alt="" style="margin-right:3px"> 拖欠农民工工资问题排查情况</div>
              <div class="table">
                <a-table :columns="columns" :data-source="data" :pagination="false"></a-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel">
      <div class="title" style="margin-bottom:20px">维权信息告示牌</div>
      <div class="flexEnd" style="margin-bottom:20px">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="color:#666">
            {{this.projectName}}
            <a-icon type="caret-down" style="color:#666" />
          </a>
          <a-menu slot="overlay" @click="onMenu">
            <a-menu-item key="1">平广扩建</a-menu-item>
            <a-menu-item key="2">京沪扩建</a-menu-item>
            <a-menu-item key="3">南部通道</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="page-example3">
        <vue-seamless-scroll :data="listData" :class-option="defaultOption" style="width:100%">
          <ul class="ul-scoll flexStart" style="width:100%">
            <div
              v-for="(item, index) in listData"
              :key="index"
              style="width:420px;margin-right:27px"
              v-viewer
            >
              <img :src="item.imgUrl" width="100%" height="100%" />
            </div>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echarts/index.vue'
import marqueeLeft from '@/components/marquee/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import lb1 from '@/assets/homeImg/lb1.png'
import lb2 from '@/assets/homeImg/lb2.png'
import lb3 from '@/assets/homeImg/lb3.png'
import lb4 from '@/assets/homeImg/lb4.png'
const option = {
  color: ['#91CC75', '#5470C6'],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'horizontal',
    // left: 10,
    data: ['已上报项目', '未上报项目']
  },
  series: [
    {
      name: '项目数',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 0, name: '已上报项目' },
        { value: 0, name: '未上报项目' }
      ]
    }
  ]
}
const columns = [
  { title: '统计项', dataIndex: 'biaoduan', key: 'biaoduan' },
  { title: '小计', dataIndex: 'laborName', key: 'laborName' }
]
const data = [
  {
    key: 1,
    biaoduan: '未解决拖欠案件数',
    laborName: '65'
  },
  {
    key: 2,
    biaoduan: '涉及被拖欠人数',
    laborName: '232'
  },
  {
    key: 3,
    biaoduan: '涉及拖欠金额',
    laborName: '249'
  },
  {
    key: 4,
    biaoduan: '涉及拖欠项目数',
    laborName: '232'
  },
  {
    key: 5,
    biaoduan: '涉及拖欠企业数',
    laborName: '249'
  },
  {
    key: 6,
    biaoduan: '本期发生的群体性事件和极端事件数（个）',
    laborName: '232'
  },
  {
    key: 7,
    biaoduan: '合计',
    laborName: '1259'
  }
]
export default {
  data() {
    return {
      echartObj: option,
      columns: columns,
      data: data,
      optionCustomer: {
        step: 1,
        limitMoveNum: 1,
        openTouch: true,
        waitTime: 1000,
        direction: 2,
        singleWidth: 0
      },
      projectName: '请选择项目',

      listData: [{ imgUrl: lb1 }, { imgUrl: lb2 }, { imgUrl: lb3 }, { imgUrl: lb4 }, { imgUrl: lb1 }]
    }
  },
  components: {
    Echart,
    marqueeLeft,
    vueSeamlessScroll
  },

  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },

  mounted() {},
  methods: {
    selectChange1(value) {
      console.log(value)
    },
    selectChange2(value) {
      console.log(value)
    },
    // 下拉菜单
    onMenu(val) {
      switch (val.key) {
        case '1':
          this.projectName = '平广扩建'
          break
        case '2':
          this.projectName = '京沪扩建'
          break
        case '3':
          this.projectName = '南部通道'
          break
        default:
          break
      }
      // console.log(val.key)
    }
  }
}
</script>

<style scoped lang='less'>
.title {
  font-size: 24px;
  margin-top: 60px;
  margin-bottom: 58px;
  font-weight: bold;
  color: #333333;
}
.contentLeft {
  width: 40%;
}
.specialManager {
  margin-bottom: 100px;
}
.contentRight {
  width: 620px;
 
}
.contentRight-content{
 height: 490px;
  border: 1px solid #f0f0f0;
  border-top: none;
}
.contentRight-title {
  background: #14c4b8;
  text-align: left;
  color: #fff;
  padding: 10px;
  margin-bottom: 14px;
}
.table {
  padding: 0 14px;
}
.carousel {
  background: #f3f6fb;
  overflow: hidden;
  padding: 0 77px;
  padding-bottom: 130px;
}

.page-example3 {
  width: 100%;
  height: 277px;
  overflow: hidden;
  // border: 1px solid #283dff;
  .ul-scoll {
    // border: 1px solid #283dff;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
</style>
